<template>
  <div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="70%" append-to-body>
      <div>
        <!-- 内容 -->
        <el-row :gutter="20">
          <el-col :span="6">【题型】{{questionType | questionType}} </el-col>
          <el-col :span="6">【编号】{{id}}</el-col>
          <el-col :span="6">【难度】{{difficulty | difficulty}}</el-col>
          <el-col :span="6">【标签】{{tags}}</el-col>
          <el-col :span="6">【学科】{{subjectName}}</el-col>
          <el-col :span="6">【目录】{{directoryName}}</el-col>
          <el-col :span="6">【方向】{{direction}}</el-col>
        </el-row>
        <hr>
        【题干】
        <span v-html="question" style="color: #0000FF;"></span>
        <p v-if="questionType!=='3'">{{questionType | questionType}} 选项:（以下选中的选项为正确答案）</p>
        <!-- 单选 -->
        <div v-if="questionType==='1'">
          <el-radio-group :value="1">
            <span v-for="(item,ind) in options" :key="ind" class="choose">
              <el-radio :label="item.isRight">{{item.title}}</el-radio>
            </span>
          </el-radio-group>
        </div>
        <!-- 多选 -->
        <div v-else-if="questionType==='2'">
          <el-checkbox-group :value="[1]">
            <span v-for="(item,ind) in options" :key="ind" class="choose">
              <el-checkbox :label="item.isRight">{{item.title}}</el-checkbox>
            </span>
          </el-checkbox-group>
        </div>
        <!-- 简答 -->
        <hr>
        【参考答案】<el-button type="danger" size="small" @click="letMeSee=true">视频答案预览</el-button>
        <div v-show="videoURL" v-if="letMeSee" style="height:200px; padding-top:30px;">
          <video :src="videoURL" width="280px" controls autoplay v-if="dialogVisible"></video>
        </div>
        <div v-show="!videoURL" v-if="letMeSee" style="padding-top:20px;">哎呀，视频不见了……</div>
        <hr>
        【答案解析】
        <span v-html="answer"></span>
        <hr>
        【题目备注】{{remarks}}
      </div>
      <div style="text-align: right;">
        <span slot="footer">
          <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  detail
} from '@/api/hmmm/questions' // 引入接口 组题列表 组题列表删除
export default {
  name: 'QuestionsPreview',
  data () {
    return {
      dialogVisible: false,
      questionType: '', // 题型
      id: '', // 编号
      difficulty: '', // 难度
      tags: '', // 标签
      subjectName: '', // 学科
      directoryName: '', // 目录
      direction: '', // 方向
      question: '', // 题干
      options: '', // 选项
      answer: '', // 答案解析
      remarks: '', // 题目备注
      videoURL: '', // 视频答案解析
      letMeSee: false // 看答案
    }
  },
  props: ['questionID', 'show'],
  watch: {
    show () {
      this.getPreview() // 填充数据
      this.letMeSee = false // 关掉答案
      this.dialogVisible = true // 显示预览层
    }
  },
  methods: {
    async getPreview () { // 获取
      await detail({
        id: this.questionID
      }).then(res => {
        // 赋值
        this.questionType = res.data.questionType
        this.id = res.data.id
        this.difficulty = res.data.difficulty
        this.tags = res.data.tags
        this.subjectName = res.data.subjectName
        this.directoryName = res.data.directoryName
        this.direction = res.data.direction
        this.question = res.data.question
        this.options = res.data.options
        this.answer = res.data.answer
        this.remarks = res.data.remarks
        this.videoURL = res.data.videoURL
      }).catch(err => {
        console.log(err)
      })
    }
  },
  filters: {
    questionType: function (type) {
      if (type === '1') {
        return '单选'
      } else if (type === '2') {
        return '多选'
      } else {
        return '简答'
      }
    },
    difficulty: function (it) {
      if (it === '1') {
        return '简单'
      } else if (it === '3') {
        return '困难'
      } else {
        return '一般'
      }
    }
  }

}
</script>

<style scoped>
.el-col {
  margin: 10px 0px;
}
.choose {
  display: block;
  line-height: 32px;
}
</style>
